<template>
  <div>
    <el-descriptions
      class="margin-top"
      title="个人信息"
      :column="3"
      border
    >
      <template #extra>
        <el-button type="primary" @click="dialogVisible = true"
          >Operation</el-button
        >
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            Username
          </div>
        </template>
        {{ userMsg.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            Telephone
          </div>
        </template>
        {{ userMsg.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            Place
          </div>
        </template>
        {{ userMsg.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            Birthday
          </div>
        </template>

        {{ userMsg.birthday }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon  >
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        {{ userMsg.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            id
          </div>
        </template>
        {{ userMsg.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon  >
              <office-building />
            </el-icon>
            role
          </div>
        </template>
        <el-tag size="small">{{
          userMsg.role === "2" ? "学生" : "管理员"
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <office-building />
            </el-icon>
            入学时间
          </div>
        </template>
        {{ userMsg.create_time }}
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  Iphone,
  OfficeBuilding,
  User,
  Location,
  Tickets,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { userMsg } from "@/utils";

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>

<style lang="less" scoped>
p {
  text-align: center;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
